<template>
  <el-scrollbar height="365px">
    <div class="hotContent">
      <div class="hot-top">
        <div class="title">
          <div class="redTitle">
            <div class="redItem">
              <a
                :href="
                  newsData.redTitleOne[0] && newsData.redTitleOne[0].target
                "
                target="_blank"
                >{{
                  newsData.redTitleOne[0] && newsData.redTitleOne[0].title
                }}</a
              >
            </div>
            <div class="redItem">
              <a
                :href="
                  newsData.redTitleOne[1] && newsData.redTitleOne[1].target
                "
                target="_blank"
                >{{
                  newsData.redTitleOne[1] && newsData.redTitleOne[1].title
                }}</a
              >
            </div>
          </div>
          <div class="smallTitle">
            <div class="smallItem">
              <a
                :href="
                  newsData.smallTitleOne[0] && newsData.smallTitleOne[0].target
                "
                target="_blank"
                >{{
                  newsData.smallTitleOne[0] && newsData.smallTitleOne[0].title
                }}</a
              >
            </div>
            <i style="font-style: normal; padding: 0 5px">|</i>
            <div class="smallItem">
              <a
                :href="
                  newsData.smallTitleOne[1] && newsData.smallTitleOne[1].target
                "
                target="_blank"
                >{{
                  newsData.smallTitleOne[1] && newsData.smallTitleOne[1].title
                }}</a
              >
            </div>
            <i style="font-style: normal; padding: 0 5px">|</i>
            <div class="smallItem">
              <a
                :href="
                  newsData.smallTitleOne[2] && newsData.smallTitleOne[2].target
                "
                target="_blank"
                >{{
                  newsData.smallTitleOne[2] && newsData.smallTitleOne[2].title
                }}</a
              >
            </div>
          </div>
        </div>
        <div class="title">
          <div class="redTitle">
            <div class="redItem">
              <a
                :href="
                  newsData.redTitleTwo[0] && newsData.redTitleTwo[0].target
                "
                target="_blank"
                >{{ newsData.redTitleTwo[0] && newsData.redTitleTwo[0].title }}
              </a>
            </div>
            <div class="redItem">
              <a
                :href="
                  newsData.redTitleTwo[1] && newsData.redTitleTwo[1].target
                "
                target="_blank"
                >{{
                  newsData.redTitleTwo[1] && newsData.redTitleTwo[1].title
                }}</a
              >
            </div>
          </div>
          <div class="smallTitle">
            <div class="smallItem">
              <a
                :href="
                  newsData.smallTitleTwo[0] && newsData.smallTitleTwo[0].target
                "
                target="_blank"
                >{{
                  newsData.smallTitleTwo[0] && newsData.smallTitleTwo[0].title
                }}</a
              >
            </div>
            <i style="font-style: normal; padding: 0 5px">|</i>
            <div class="smallItem">
              <a
                :href="
                  newsData.smallTitleTwo[1] && newsData.smallTitleTwo[1].target
                "
                target="_blank"
                >{{
                  newsData.smallTitleTwo[1] && newsData.smallTitleTwo[1].title
                }}</a
              >
            </div>
            <i style="font-style: normal; padding: 0 5px">|</i>
            <div class="smallItem">
              <a
                :href="
                  newsData.smallTitleTwo[2] && newsData.smallTitleTwo[2].target
                "
                target="_blank"
                >{{
                  newsData.smallTitleTwo[2] && newsData.smallTitleTwo[2].title
                }}</a
              >
            </div>
          </div>
        </div>
      </div>
      <div class="hot-bottom">
        <div class="list">
          <div
            class="contentItem"
            v-for="(item, index) in newsData.link"
            :key="index"
          >
            <i class="icon-item jd">{{ item.title }}</i>
            <a :href="item.target" target="_blank">{{ item.content }}</a>
            <span class="time">{{ item.time }}</span>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { onUpdated, reactive } from "vue";

const props = defineProps({
  news: Array,
});

const newsData = reactive({
  redTitleOne: [],
  redTitleTwo: [],
  smallTitleOne: [],
  smallTitleTwo: [],
  link: [],
});

onUpdated(() => {
  handleData();
});

// 整合数据
const handleData = () => {
  newsData.link = props.news[0];
  const RedAndSmall = props.news[1];
  const totalRed = RedAndSmall[0];
  newsData.redTitleOne = [totalRed[0], totalRed[1]];
  newsData.redTitleTwo = [totalRed[2], totalRed[3]];
  const totalSmall = RedAndSmall[1];
  newsData.smallTitleOne = [totalSmall[0], totalSmall[1], totalSmall[2]];
  newsData.smallTitleTwo = [totalSmall[3], totalSmall[4], totalSmall[5]];
};
</script>

<style scoped lang="less">
.hotContent {
  display: flex;
  flex-direction: column;
  .hot-top {
    display: flex;
    flex-direction: column;
    .title {
      padding-bottom: 10px;
      margin-bottom: 30px;
      border-bottom: 1px solid #ededed;
    }
    .redTitle {
      display: flex;
      justify-content: space-around;
      .redItem {
        font-size: 20px;
        font-weight: bold;
        a {
          color: #ff2d22;
        }
      }
    }
    .smallTitle {
      display: flex;
      justify-content: center;
      font-size: 13px;
      margin-top: 10px;
      a {
        &:hover {
          color: #ff2d22;
        }
      }
    }
  }

  .list {
    .contentItem {
      margin-bottom: 10px;
      .icon-item {
        display: inline-block;

        width: 42px;
        height: 22px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        line-height: 22px;
        border-radius: 6px;
        margin-top: 3px;
        font-style: normal;
      }
      a {
        margin-left: 10px;
        font-size: 14px;
        &:hover {
          color: #ff2d22;
        }
      }
      .time {
        float: right;
        color: #b1b1b1;
        line-height: 28px;
        font-size: 12px;
      }
    }
  }
  .jd {
    background-image: linear-gradient(39deg, #4ce8cf 0%, #4cd7fa 100%);
  }
}
</style>
